<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="component/pageHead.jsp" %>

<!doctype html>
<html class="no-js" lang="zxx">
<head>
    <base href="<%=basePath%>">
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Parlo - eCommerce Bootstrap 4 Template</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.png">
    <!-- CSS	============================================ --><!-- Bootstrap CSS -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css"><!-- Icon Font CSS -->
    <link rel="stylesheet" href="assets/css/icons.min.css"><!-- Plugins CSS -->
    <link rel="stylesheet" href="assets/css/plugins.css"><!-- Main Style CSS -->
    <link rel="stylesheet" href="assets/css/style.css"><!-- Modernizer JS -->
    <script src="assets/js/vendor/modernizr-2.8.3.min.js"></script>

    <%--    vue--%>
    <script src="assets/js/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<jsp:include page="component/head.jsp"></jsp:include>
<div id="checkOut" class="wrapper">


    <div class="breadcrumb-area pt-35 pb-35 bg-gray">
        <div class="container">
            <div class="breadcrumb-content text-center">
                <ul>
                    <li><a href="index.jsp">主页</a></li>
                    <li class="active">提交订单</li>
                </ul>
            </div>
        </div>
    </div><!-- compare main wrapper start -->
    <div class="checkout-main-area pt-70 pb-70">
        <div class="container">


            <div class="checkout-wrap pt-30">
                <div class="row">
                    <div class="col-lg-7">
                        <div class="billing-info-wrap mr-50"><h3>订单细节</h3>
                            <div class="row">
                                <div class="col-lg-6 col-md-6">
                                    <div class="billing-info mb-20"><label>姓名 <abbr class="required"
                                                                                    title="required">*</abbr></label><input
                                            v-model="consigneeName" type="text"></div>
                                </div>

                                <div class="col-lg-12">
                                    <div class="billing-info mb-20"><label>手机号 <abbr class="required"
                                                                                     title="required">*</abbr></label><input
                                            v-model="consigneePhone" type="text"></div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="billing-info mb-20"><label>地址 <abbr class="required"
                                                                                    title="required">*</abbr></label><input
                                            v-model="consigneeAdress" class="billing-address" placeholder="House number and street name"
                                            type="text">
                                    </div>
                                </div>

                            </div>


                            <div class="additional-info-wrap"><label>备注:</label><textarea
                                    placeholder="Notes about your order, e.g. special notes for delivery. "
                                    name="message"></textarea></div>
                        </div>
                    </div>
                    <div class="col-lg-5">
                        <div class="your-order-area"><h3>你的订单</h3>
                            <div class="your-order-wrap gray-bg-4">
                                <div class="your-order-info-wrap">
                                    <div class="your-order-info">
                                        <ul>
                                            <li>商品 <span>总价格</span></li>
                                        </ul>
                                    </div>
                                    <div class="your-order-middle">
                                        <ul>
                                            <c:forEach var="carVo" items="${checkOutOrderVo.list}">
                                                <li>${carVo.furnitureName} X ${carVo.number} <span>$ ${carVo.price*carVo.number} </span></li>
                                            </c:forEach>

                                        </ul>
                                    </div>
                                    <div class="your-order-info order-subtotal">
                                        <ul>
                                            <li>运费 <span>$ 0  </span></li>
                                        </ul>
                                    </div>

                                    <div class="your-order-info order-total">
                                        <ul>
                                            <li>总费用 <span>$ ${checkOutOrderVo.totalPrice} </span></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="payment-method">
                                    <div class="pay-top sin-payment"><input id="payment_method_1" class="input-radio"
                                                                            type="radio" value="cheque"
                                                                            checked="checked"
                                                                            name="payment_method"><label
                                            for="payment_method_1">直接银行转帐</label>
                                        <div class="payment-box payment_method_bacs"><p>
                                            将款项直接存入我们的银行帐户。请使用您的订单ID作为付款参考。在我们的帐户中的资金清除之前，将不会发货您的订单。</p>
                                        </div>
                                    </div>
                                    <div class="pay-top sin-payment"><input id="payment-method-2" class="input-radio"
                                                                            type="radio" value="cheque"
                                                                            name="payment_method"><label
                                            for="payment-method-2">支票付款</label>
                                        <div class="payment-box payment_method_bacs"><p>
                                            将款项直接存入我们的银行帐户。请使用您的订单ID作为付款参考。在我们的帐户中的资金清除之前，将不会发货您的订单。</p>
                                        </div>
                                    </div>
                                    <div class="pay-top sin-payment"><input id="payment-method-3" class="input-radio"
                                                                            type="radio" value="cheque"
                                                                            name="payment_method"><label
                                            for="payment-method-3">货到付款</label>
                                        <div class="payment-box payment_method_bacs"><p>
                                            将款项直接存入我们的银行帐户。请使用您的订单ID作为付款参考。在我们的帐户中的资金清除之前，将不会发货您的订单。</p>
                                        </div>
                                    </div>
                                    <div class="pay-top sin-payment sin-payment-3"><input id="payment-method-4"
                                                                                          class="input-radio"
                                                                                          type="radio" value="cheque"
                                                                                          name="payment_method"><label
                                            for="payment-method-4">支付宝 <img alt=""
                                                                               src="assets/img/icon-img/payment.png"><a
                                            href="#">What is PayPal?</a></label>
                                        <div class="payment-box payment_method_bacs"><p>Make your payment directly into
                                            our bank account. Please use your Order ID as the payment reference. Your
                                            order will not be shipped until the funds have cleared in our account.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="Place-order mt-40"><a href="javascript:void(0);"  @click="submit()">Place Order</a></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- compare main wrapper end -->
    <footer class="footer-area bg-paleturquoise">
        <div class="container">
            <div class="footer-top text-center pt-45 pb-45">
                <nav>
                    <ul>
                        <li><a href="#">Home </a></li>
                        <li><a href="#">Shop </a></li>
                        <li><a href="#">Accessories </a></li>
                        <li><a href="#">Contact </a></li>
                        <li><a href="#">About </a></li>
                        <li><a href="#">Blog </a></li>
                    </ul>
                </nav>
            </div>
        </div>
        <div class="footer-bottom border-top-1 pt-20">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-4 col-md-5 col-12">
                        <div class="footer-social pb-20"><a href="#">Facebok</a><a href="#">Twitter</a><a href="#">Linkedin</a><a
                                href="#">Instagram</a></div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-12">
                        <div class="copyright text-center pb-20"><p>Copyright Â© All Right <a
                                href="http://www.bootstrapmb.com/" title="bootstrapmb">Reserved</a></p></div>
                    </div>
                    <div class="col-lg-4 col-md-3 col-12">
                        <div class="payment-mathod pb-20"><a href="#"><img src="assets/img/icon-img/payment.png" alt=""></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>
</div><!-- All JS is here============================================ --><!-- jQuery JS -->
<script src="assets/js/vendor/jquery-1.12.4.min.js"></script><!-- Popper JS -->
<script src="assets/js/popper.min.js"></script><!-- Bootstrap JS -->
<script src="assets/js/bootstrap.min.js"></script><!-- Plugins JS -->
<script src="assets/js/plugins.js"></script><!-- Ajax Mail -->
<script src="assets/js/ajax-mail.js"></script><!-- Main JS -->
<script src="assets/js/main.js"></script>

<script src="js/checkOut.js"></script>
</body>
</html>